<template>
	<div class="wraper">
		<div class="line"></div>
		<div class="nav-bar" :class="{iphoneX:isIphoneX,iphone:isIphone}">
			<div class="arrow" @click="goBack"></div>
			<div class="filter" v-if="!isNigeria" @click="choiceIcon()"></div>
		</div>
		<div class="tab" :class="{iphoneX:isIphoneX,iphone:isIphone}">
			<span>{{$t('history-key1',{name:name})}}</span>
		</div>
		<div class="content" :class="{noList:list.length===0}">
			<div class="list" :class="{iphoneX:isIphoneX,iphone:isIphone}">
				<van-list
					v-model="loading"
	  				:finished="finished"
	  				:error.sync="loadError"
	  				:offset="offset"
	  				:error-text="$t('reloadText')"
	  				:finished-text="$t('finishedText')"
	  				:loading-text="$t('loading')"
	  				@load="load"
				>
		  			<van-cell v-for="item of list" :key="item.id">
						<div class="item">
							<div class="money">
								<div class="amount">{{item.amount}}</div>
								<div class="d">
									<span>{{item.fromName}}</span>
									<img src="../../static/images/arrow-right-down.png" alt="">
									<span>{{item.toName}}</span>
								</div>
							</div>
							<div class="right">
								<div class="date">
									<p>{{item.date}}</p>
								</div>
								<div class="state">
									<p class="img" v-if="item.state==0">
										<img src="../../static/images/handler-wait.png" alt="">
									</p>
									<p class="img" v-if="item.state==1">
										<img src="../../static/images/handler-success.png" alt="">
									</p>
									<p class="img" v-if="item.state==2">
										<img src="../../static/images/handler-failed.png" alt="">
									</p>
									<!-- 处理中 -->
									<p v-if="item.state==0">{{$t('history-key3')}}</p>
									<!-- 处理成功 -->
									<p v-if="item.state==1">{{$t('history-key2')}}</p>
									<!-- 划转失败 -->
									<p v-if="item.state==2">{{$t('history-key4')}}</p>
								</div>
							</div>
						</div>
		    		</van-cell>
		    		<div class="empty" v-if="list.length===0 && finished">
		    			<p class="img"><img src="../../static/images/empty.png"></p>
		    			<p class="desc">{{$t('noOrderList')}}</p>
		    		</div>
				</van-list>
			</div>
		</div>
		<!-- 币种选择 -->
		<van-action-sheet 
			class="iconBox" 
			:class="{isIphoneX:isIphoneX}"
			v-model="iconShown" 
			:actions="iconList" 
			:cancel-text="$t('cancel')" 
			@select="selectIcon" 
		/>
	</div>
</template>
<script src="./history.js"></script>
<style scoped>
	@import './history.css';
</style>
<style>
	.content.noList .van-list__finished-text{
		display: none;
	}
</style>